<template>
    <div class="category-item">
        <div class="title">
            <i class="icon" :class="`icon-${titleIcon}`"></i>
        </div>
        <ul class="list">
            <li v-for="(item,index) in list" :key="index">
                <router-link :to="`/list?keword=${item.text}`">
                    <div class="pic">
                        <img v-lazy="item.pic" alt="">
                    </div>
                    <p>
                        {{item.text}}
                    </p>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  props: {
    title: String,
    list: Array,
  },
  computed:{
      titleIcon(){
          return this.titleMap.find(item=>item.title===this.title).icon;
      }
  },
  data(){
      return {
          titleMap:[
              {
                  title: '热销精选',
                  icon: 'rxjx'
              }, {
                  title: '品牌乐器',
                  icon: 'ppyq'
              }
          ]
      }
  }
};
</script>
